<template>
  <div id="newProductPage" @click="showResult = false">
    <HeadNav
      type="publish"
      :show="1"
      ref="head"
      @publisherChange="publisherChange()"
    ></HeadNav>
    <div class="wd-1220">
      <div class="clearfix">
        <div class="float-left">
          <SlideNav type="publish" sort="newproduct"></SlideNav>
        </div>
        <div class="float-right">
          <div
            class="main-container"
            style="min-height: 660px"
            v-if="pagePower"
          >
            <div class="model-container">
              <div class="model-bg">
                <div class="section-title">新品追踪</div>
                <div class="new-data clearfix">
                  <div class="float-left" style="margin-top: 10px">
                    <div class="data-block">
                      <div>
                        <a-icon type="line-chart" />
                        <span class="secondary-font">
                          在售新品种数
                          <a-popover
                            trigger="click"
                            placement="topLeft"
                            destroyTooltipOnHide
                            :align="{ offset: [-12, 3] }"
                          >
                            <template slot="content">
                              <div style="font-size: 12px; color: #7789af">
                                新品范围：出版时间在360天以内的品种，视为新品<br />
                                新品期销售策略：根据新品的定价及新品期内的实销折扣，将品种划分为9个类型
                              </div>
                            </template>
                            <span
                              style="
                                cursor: pointer;
                                color: #93a2bf;
                                line-height: normal;
                                font-size: 16px;
                                display: inline-block;
                                vertical-algn: middle;
                              "
                            >
                              <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-tips" />
                              </svg>
                            </span>
                          </a-popover>
                        </span>
                      </div>
                      <div class="data-font">{{ total }}</div>
                    </div>
                    <div class="data-block" style="margin-top: 10px">
                      <div>
                        <a-icon type="line-chart" />
                        <span class="secondary-font">
                          上月新品码洋占比
                          <a-popover
                            trigger="click"
                            placement="topLeft"
                            destroyTooltipOnHide
                            :align="{ offset: [-12, 3] }"
                          >
                            <template slot="content">
                              <div style="font-size: 12px; color: #7789af">
                                上月新品总码洋 / 上月本社全品种总码洋
                              </div>
                            </template>
                            <span
                              style="
                                cursor: pointer;
                                color: #93a2bf;
                                line-height: normal;
                                font-size: 16px;
                                display: inline-block;
                                vertical-algn: middle;
                              "
                            >
                              <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-tips" />
                              </svg>
                            </span>
                          </a-popover>
                        </span>
                      </div>
                      <div class="data-font">
                        {{ newRatio ? newRatio + "%" : "--" }}
                      </div>
                    </div>
                  </div>
                  <div
                    class="float-right"
                    style="width: 320px; margin-right: 160px"
                  >
                    <div>不同销售层级的品种数</div>
                    <div id="ring-chart1"></div>
                  </div>
                  <!-- <div
                    class="float-left"
                    style="width: 320px; margin-left: 100px"
                  >
                    <div>不同上市时间的品种数</div>
                    <div id="ring-chart2"></div>
                  </div> -->
                </div>
              </div>
            </div>
            <!-- 新品日历 -->
            <div class="model-container">
              <div class="model-bg">
                <div class="section-title">
                  新品日历
                  <a-select
                    v-model="chooseYear"
                    style="width: 80px; margin-left: 10px; font-weight: normal"
                    @change="yearChange"
                  >
                    <a-select-option
                      :value="item.value"
                      v-for="(item, index) in yearList"
                      :key="index"
                      >{{ item.year }}</a-select-option
                    >
                  </a-select>
                </div>
                <div class="calendar-container">
                  <a-row type="flex">
                    <a-col :span="15">
                      <template v-if="calendarList.length > 0">
                        <div
                          :class="[
                            'calendar-card',
                            chooseMonth == index + 1 ? 'active' : '',
                          ]"
                          v-for="(item, index) in calendarList"
                          @click="changeMonth(index + 1)"
                          :key="index"
                        >
                          <div class="calendar-card-head">
                            <span class="calendar-card-title"
                              >{{ chooseYear }}年{{ index + 1 }}月</span
                            >
                            <a-badge
                              v-if="item.total_count"
                              :count="item.total_count"
                              :number-style="{
                                backgroundColor: '#E3615C',
                              }"
                            />
                          </div>
                          <template v-if="item.list.length > 0">
                            <div
                              class="calendar-card-content"
                              v-for="(gitem, gindex) in item.list"
                              :key="gindex"
                            >
                              {{ gitem.title }}
                            </div>
                          </template>
                          <template v-else>
                            <div class="no-data" style="padding: 39px 0">
                              暂无数据
                            </div>
                          </template>
                        </div>
                      </template>
                      <div v-else class="no-data">暂无日历数据</div>
                    </a-col>
                    <a-col :span="9">
                      <div class="newgoods-list">
                        <div class="newgoods-list-head">
                          <span>{{chooseYear}}年{{chooseMonth}}月上架新品（共{{calendarTotal}}个）</span>
                          <div>
                            <span
                              @click="calendarChangePage('minus')"
                              :class="[
                                'newgoods-list-arrow',
                                calendarPage <= 1 ? 'disabled' : '',
                              ]"
                              ><a-icon type="left"
                            /></span>
                            <span style="margin-right: 5px">{{
                              calendarPage
                            }}</span>
                            <span>/</span>
                            <span style="margin-left: 5px">{{
                              calendarTotalPage
                            }}</span>
                            <span
                              @click="calendarChangePage('add')"
                              :class="[
                                'newgoods-list-arrow',
                                calendarPage == calendarTotalPage ? 'disabled' : '',
                              ]"
                              ><a-icon type="right"
                            /></span>
                          </div>
                        </div>
                        <!-- 列表 -->
                        <div
                          class="newgoods-list-goods-container"
                          v-if="calendarGoodsList.length > 0"
                        >
                          <div
                            class="newgoods-list-goods-content"
                            v-for="(item, index) in calendarGoodsList"
                            :key="index"
                          >
                            <div class="newgoods-list-goods-img">
                              <img
                                :src="item.cover_pic"
                                alt=""
                                width="45"
                                height="45"
                                v-if="item.cover_pic"
                              />
                              <span
                                v-else
                                class="no-pic"
                                style="min-width: 45px; min-height: 45px"
                              ></span>
                            </div>
                            <div class="newgoods-list-goods-info">
                              <div class="newgoods-list-goods-title" :title="item.title">
                                {{ item.title }}
                              </div>
                              <div>
                                <span
                                  class="data-tab data-tab-eleven"
                                  v-if="item.publish_month"
                                  >上市{{ item.publish_month }}个月</span
                                >
                                <span class="data-tab data-tab-eleven" v-if="item.sale_type == '滞销品种' || item.sale_type == '停售品种'">[预计]{{item.sale_type}}</span>
                                <span class="data-tab data-tab-eight" v-else-if="item.sale_type == '畅销品种'">[预计]{{item.sale_type}}</span>
                                <span class="data-tab data-tab-ten" v-else-if="item.sale_type">[预计]{{item.sale_type}}</span>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="no-data" v-else>暂无数据</div>
                      </div>
                    </a-col>
                  </a-row>
                </div>
              </div>
            </div>
            <!-- 选择条件 -->
            <div class="model-container">
              <div class="model-bg clearfix choose">
                <div class="float-left" style="line-height: 32px">
                  <span>
                    <a-select
                      v-model="chooseTime"
                      style="width: 160px"
                      @change="selectTime"
                    >
                      <a-select-option value="1"
                        >按预测月均销售排序</a-select-option
                      >
                      <a-select-option value="2"
                        >按上周销售排序</a-select-option
                      >
                      <a-select-option value="3"
                        >按累计销售排序</a-select-option
                      >
                      <a-select-option value="4"
                        >按上市时间排序</a-select-option
                      >
                    </a-select>
                  </span>
                  <!-- <span style="margin-left: 25px">
                    <a-dropdown :trigger="['click']" placement="bottomLeft">
                      <a
                        class="ant-dropdown-link"
                        @click="(e) => e.preventDefault()"
                        style="font-size: 12px; color: #4576db"
                      >
                        <span v-if="chooseTrend == 0">全部新品趋势</span>
                        <span v-if="chooseTrend == 1">逐步下降</span>
                        <span v-if="chooseTrend == 2">持续增长</span>
                        <span v-if="chooseTrend == 3">平稳销售</span>
                        <a-icon type="down" />
                      </a>
                      <a-menu slot="overlay">
                        <a-menu-item
                          v-for="(item, index) in trendList"
                          :key="index"
                        >
                          <a
                            href="javascript:;"
                            style="
                              padding: 5px 15px;
                              color: #515a6e;
                              font-size: 12px;
                            "
                            @click="selectTrend(item, index)"
                            >{{ item.name }}</a
                          >
                        </a-menu-item>
                      </a-menu>
                    </a-dropdown>
                  </span> -->
                </div>
                <div class="float-right">
                  <div class="common" style="position: relative">
                    <a-input
                      placeholder="搜索品种名称、ISBN"
                      @input="inputSearch"
                      @click.stop="inputClick"
                      v-model="inputVal"
                    ></a-input>
                    <div class="search-result" v-if="showResult">
                      <div class="list" v-if="dataSource.length > 0">
                        <div
                          class="result-content"
                          v-for="(item1, index1) in dataSource"
                          :key="index1"
                          @click.stop="selected(item1, index1)"
                        >
                          <img
                            :src="item1.cover_pic"
                            alt
                            style="width: 35px; height: 35px"
                            v-if="item1.cover_pic"
                          />
                          <span
                            v-else
                            class="no-pic"
                            style="min-width: 35px; min-height: 35px"
                          ></span>
                          <span class="result-title" :title="item1.title">{{
                            item1.title
                          }}</span>
                        </div>
                      </div>
                      <div
                        class="no-result"
                        v-if="dataSource.length == 0 && showAbout"
                      >
                        没有相关商品
                      </div>
                      <div
                        style="text-align: center; margin-top: 100px"
                        v-if="searchLoading"
                      >
                        <a-spin tip></a-spin>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 列表 -->
            <div v-if="goodsList.length > 0">
              <div
                class="model-container"
                v-for="(item, index) in goodsList"
                :key="index"
              >
                <div class="model-bg">
                  <div class="goods-list clearfix">
                    <div class="float-left">
                      <div class="goods">
                        <span class="goods-image" v-if="item.cover_pic">
                          <img
                            :src="item.cover_pic"
                            alt
                            style="width: 63px; height: 63px"
                          />
                          <div
                            class="goods-logo prev"
                            v-if="item.is_presale == 1"
                          >
                            预
                          </div>
                          <div
                            class="goods-logo group"
                            v-else-if="item.have_presale == 1"
                          >
                            组
                          </div>
                        </span>
                        <span
                          v-else
                          class="no-pic"
                          style="min-width: 63px; min-height: 63px"
                        ></span>
                        <div class="title">
                          <span
                            class="click-font gname"
                            @click="$toDetail(item.goods_id)"
                            >{{ item.goods_name }}</span
                          >
                          <div>
                            <span
                              class="data-tab data-tab-night data-tab-big"
                              >{{
                                item.publish_duration > 0
                                  ? "上市" + item.publish_duration + "个月"
                                  : "预售中"
                              }}</span
                            >
                            <span
                              class="data-tab data-tab-seven data-tab-big"
                              v-if="item.strategy"
                              >{{ item.strategy }}</span
                            >
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="float-right">
                      <div class="data-block">
                        <div>
                          <span class="secondary-font">上周销售指数</span>
                        </div>
                        <div class="font">
                          {{ item.last_week_sale_total.toLocaleString() }}
                        </div>
                      </div>
                      <div class="data-block">
                        <div>
                          <span class="secondary-font">上周新品榜排名</span>
                        </div>
                        <div class="font">
                          {{ item.last_week_rank_new
                          }}<span
                            v-if="
                              item.last_week_rank_new &&
                              item.last_week_rank_new !== '--'
                            "
                            class="small"
                            >名</span
                          >
                        </div>
                      </div>
                      <div class="data-block">
                        <div>
                          <span class="secondary-font">预测月均销量</span>
                        </div>
                        <div class="font">
                          {{ item.month_sale_num }}
                        </div>
                      </div>
                      <div class="data-block">
                        <div>
                          <span class="secondary-font">累计销售指数</span>
                        </div>
                        <div class="font">
                          {{ item.sale_total.toLocaleString() }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 分页 -->
              <div class="model-container">
                <div class="model-bg">
                  <div class="page">
                    <a-pagination
                      :show-total="(total) => `共 ${total} 条数据`"
                      :default-current="1"
                      :total="total"
                      v-model="page"
                      :defaultPageSize="pageSize"
                      @change="onShowSizeChange"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div v-else>
              <div class="model-container">
                <div class="model-bg">
                  <div class="no-data">暂无数据</div>
                </div>
              </div>
            </div>
          </div>
          <div class="main-container" v-else>
            <div class="model-container">
              <div
                class="model-bg"
                style="
                  min-height: 660px;
                  padding-bottom: 75px;
                  position: relative;
                "
              >
                <PageNoPower></PageNoPower>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Loading
      ref="load"
      :show="1"
      :isLoading="isLoading || calendarLoading || calendarGoodsLoading"
    ></Loading>
  </div>
</template>
<style lang="scss" scoped src="@/style/scss/pages/publish/other.scss"></style>
<script>
import { Chart, registerShape } from "@antv/g2";
import {
  TOP_SEARCH,
  TRACE_NEWGOODS,
  TRACE_CALENDAR,
  TRACE_CALENDARGOODSLISTS,
} from "../../apis/publish.js";
export default {
  data() {
    return {
      pagePower: true,
      ringData1: [
        { type: "1000册以上", sold: 0 },
        { type: "500~1000册", sold: 0 },
        { type: "100~500册", sold: 0 },
        { type: "10~100册", sold: 0 },
        { type: "10册以下", sold: 0 },
      ],
      ringData2: [
        { type: "预售中", sold: 0 },
        { type: "1~2个月", sold: 0 },
        { type: "3~4个月", sold: 0 },
        { type: "4~6个月", sold: 0 },
        { type: "6个月以上", sold: 0 },
      ],
      ringChart1: null,
      ringChart2: null,
      chooseTime: "1",
      chooseTrend: 0,
      chooseId: 0,
      trendList: [
        { name: "全部新品趋势", id: 0 },
        { name: "逐步下降", id: 1 },
        { name: "持续增长", id: 2 },
        { name: "平稳销售", id: 3 },
      ],
      inputVal: "",
      dataSource: [],
      showResult: false,
      searchLoading: false,
      showAbout: false,
      goodsList: [],
      goodsTotal: 0,
      page: 1,
      total: 0,
      pageSize: 10,
      calendarPage: 1,
      calendarTotal: 0,
      calendarTotalPage: 0,
      calendarList: [],
      calendarGoodsList: [],
      isLoading: true,
      calendarLoading: true,
      calendarGoodsLoading: true,
      newRatio: 0,
      yearList: [],
      chooseYear: "",
      chooseMonth: 0,
    };
  },
  mounted() {
    this.yearList = this.$getYearList();
    this.chooseYear = this.yearList[0].value;
    this.chooseMonth = this.$moment().format("MM");
    if (Number(this.chooseMonth) < 10) {
      this.chooseMonth = this.chooseMonth.toString().replace(/0/, "");
    }
    this.getData();
    this.getCalendarData();
  },
  updated() {},
  methods: {
    async getData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        sort_type: this.chooseTime,
        goods_id: this.chooseId,
        page: this.page,
        page_size: this.pageSize,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await TRACE_NEWGOODS(data);
      if (res.code == 0) {
        this.pagePower = true;
        this.total = res.data.total;
        this.newRatio = res.data.ratio;
        let _total1 = 0,
          _total2 = 0;
        for (let i in res.data.sale_level_count) {
          _total1 += res.data.sale_level_count[i];
        }
        this.ringData1 = this.ringData1.map((value, key) => {
          if (value.type == "1000册以上") {
            let _num = Number(
              ((res.data.sale_level_count.level_1 / _total1) * 100).toFixed(2)
            );
            value.sold = _num ? _num : 0;
          } else if (value.type == "500~1000册") {
            let _num = Number(
              ((res.data.sale_level_count.level_2 / _total1) * 100).toFixed(2)
            );
            value.sold = _num ? _num : 0;
          } else if (value.type == "100~500册") {
            let _num = Number(
              ((res.data.sale_level_count.level_3 / _total1) * 100).toFixed(2)
            );
            value.sold = _num ? _num : 0;
          } else if (value.type == "10~100册") {
            let _num = Number(
              ((res.data.sale_level_count.level_4 / _total1) * 100).toFixed(2)
            );
            value.sold = _num ? _num : 0;
          } else if (value.type == "10册以下") {
            let _num = Number(
              ((res.data.sale_level_count.level_5 / _total1) * 100).toFixed(2)
            );
            value.sold = _num ? _num : 0;
          }
          return value;
        });
        for (let i in res.data.publish_time_info) {
          _total2 += res.data.publish_time_info[i];
        }
        this.ringData2 = this.ringData2.map((value, key) => {
          if (value.type == "预售中") {
            let _num = Number(
              ((res.data.publish_time_info[1] / _total2) * 100).toFixed(2)
            );
            value.sold = _num ? _num : 0;
          } else if (value.type == "1~2个月") {
            let _num = Number(
              ((res.data.publish_time_info[2] / _total2) * 100).toFixed(2)
            );
            value.sold = _num ? _num : 0;
          } else if (value.type == "3~4个月") {
            let _num = Number(
              ((res.data.publish_time_info[3] / _total2) * 100).toFixed(2)
            );
            value.sold = _num ? _num : 0;
          } else if (value.type == "4~6个月") {
            let _num = Number(
              ((res.data.publish_time_info[4] / _total2) * 100).toFixed(2)
            );
            value.sold = _num ? _num : 0;
          } else if (value.type == "6个月以上") {
            let _num = Number(
              ((res.data.publish_time_info[5] / _total2) * 100).toFixed(2)
            );
            value.sold = _num ? _num : 0;
          }
          return value;
        });
        let _this = this;
        this.$nextTick(() => {
          if (_this.ringChart1) {
            _this.ringChart1.destroy();
            _this.initData1();
          } else {
            _this.initData1();
          }
          // if (_this.ringChart2) {
          //   _this.ringChart2.destroy();
          //   _this.initData2();
          // } else {
          //   _this.initData2();
          // }
          _this.isLoading = false;
        });
        this.goodsList = [];
        this.goodsList = res.data.list;
        this.showResult = false;
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 搜索商品
    async search(_value) {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        search: _value,
        page: 1,
        page_size: 100,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await TOP_SEARCH(data);
      if (res.code == 0) {
        if (res.data.search == this.inputVal) {
          this.dataSource = res.data.lists.map((value, key) => {
            return value;
          });
        }
        this.searchLoading = false;
        this.showAbout = true;
      } else {
        this.searchLoading = false;
        this.$refs.head.globalTip(1, res.message, res.code);
      }
    },
    // 获取日历列表
    async getCalendarData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        year: this.chooseYear,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await TRACE_CALENDAR(data);
      if (res.code == 0) {
        this.pagePower = true;
        this.calendarList = [];
        this.calendarList = res.data;
        let _this = this;
        this.calendarPage = 1;
        this.getCalendarGoodsData();
        this.$nextTick(() => {
          _this.calendarLoading = false;
        });
      } else {
        this.calendarLoading = false;
        this.calendarGoodsLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 获取日历商品列表
    async getCalendarGoodsData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        year: this.chooseYear,
        month: this.chooseMonth,
        page: this.calendarPage,
        page_size: this.pageSize,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await TRACE_CALENDARGOODSLISTS(data);
      if (res.code == 0) {
        this.pagePower = true;
        this.calendarGoodsList = [];
        this.calendarGoodsList = res.data.list;
        this.calendarTotal = res.data.total_count;
        let _total = Math.ceil(res.data.total_count / this.pageSize);
        this.calendarTotalPage = _total?_total:1;
        let _this = this;
        this.$nextTick(() => {
          _this.calendarGoodsLoading = false;
        });
      } else {
        this.calendarGoodsLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 选择某个月份
    changeMonth(month) {
      this.chooseMonth = month;
      this.calendarGoodsLoading = true;
      this.calendarPage = 1;
      this.getCalendarGoodsData();
    },
    // 日历商品列表分页
    calendarChangePage(type){
      if(type == 'minus'){
        if(this.calendarPage > 1){
          this.calendarGoodsLoading = true;
          this.calendarPage --;
          this.getCalendarGoodsData();
        }
      }else if(type == 'add'){
        if(this.calendarPage < this.calendarTotalPage){
          this.calendarGoodsLoading = true;
          this.calendarPage ++;
          this.getCalendarGoodsData();
        }
      }
    },
    inputClick() {},
    inputSearch() {
      this.dataSource = [];
      if (this.inputVal.length > 0) {
        this.showResult = true;
        this.searchLoading = true;
        this.showAbout = false;
        this.search(this.inputVal);
      } else {
        this.showResult = false;
        this.chooseId = 0;
        this.page = 1;
        this.getData();
      }
    },
    selected(item1, index1) {
      this.chooseId = item1.goods_id;
      this.changeData();
    },
    selectTime(value) {
      this.chooseTime = value;
      this.changeData();
    },
    selectTrend(item, index) {
      this.chooseTrend = item.id;
      this.changeData();
    },
    changeData() {
      this.isLoading = true;
      this.page = 1;
      this.getData();
    },
    // 分页切换
    onShowSizeChange(page, pageSize) {
      this.page = page;
      this.isLoading = true;
      this.getData();
    },
    yearChange(value) {
      this.calendarLoading = true;
      this.getCalendarData();
    },
    // 渲染饼图
    initData1() {
      let data = this.ringData1,
        _this = this;
      // 可以通过调整这个数值控制分割空白处的间距，0-1 之间的数值
      const sliceNumber = 0.003;
      // 自定义 other 的图形，增加两条线
      registerShape("interval", "slice-shape", {
        draw(cfg, container) {
          const points = cfg.points;
          let path = [];
          path.push(["M", points[0].x, points[0].y]);
          path.push(["L", points[1].x, points[1].y - sliceNumber]);
          path.push(["L", points[2].x, points[2].y - sliceNumber]);
          path.push(["L", points[3].x, points[3].y]);
          path.push("Z");
          path = this.parsePath(path);
          return container.addShape("path", {
            attrs: {
              fill: cfg.color,
              path,
            },
          });
        },
      });

      this.ringChart1 = new Chart({
        container: "ring-chart1", // 指定图表容器 ID
        autoFit: true,
        height: 160,
        padding: [0, 0, 0, -200],
      });

      this.ringChart1.data(data);
      this.ringChart1.scale("sold", {
        formatter: (val) => {
          // val = val * 100 + "%";
          return val;
        },
      });
      this.ringChart1.coordinate("theta", {
        radius: 0.75,
        innerRadius: 0.7,
      });
      this.ringChart1.legend("type", {
        position: "right", // 配置图例显示位置
        custom: true, // 关键字段，告诉 G2，要使用自定义的图例
        offsetX: -100,
        items: data.map((obj, index) => {
          return {
            name: obj.type, // 对应 itemName
            value: obj.sold, // 对应 itemValue
            marker: {
              symbol: "circle", // marker 的形状
              style: {
                r: 5, // marker 图形半径
                fill: ["#E2041B", "#D9333F", "#E9546B", "#F09199", "#F5B1AA"][
                  index
                ],
              },
            }, // marker 配置
          };
        }),
        itemName: {
          style: {
            fill: "#07193F",
          },
        },
        itemValue: {
          style: {
            fill: "#07193F",
            fontWeight: 900,
          }, // 配置 itemValue 样式
          alignRight: true,
          formatter: (val, obj) => {
            if (obj.id == "1000册以上") {
              return `\t\t\t\t\t\t\t\t\t\t${val}%`;
            } else if (obj.id == "500~1000册") {
              return `\t\t\t\t\t\t\t\t\t${val}%`;
            } else if (obj.id == "100~500册") {
              return `\t\t\t\t\t\t\t\t\t\t\t${val}%`;
            } else if (obj.id == "10~100册") {
              return `\t\t\t\t\t\t\t\t\t\t\t\t\t${val}%`;
            } else if (obj.id == "10册以下") {
              return `\t\t\t\t\t\t\t\t\t\t\t\t\t\t${val}%`;
            }
          },
        },
      });
      this.ringChart1.tooltip({
        showMarkers: false,
      });
      this.ringChart1
        .interval()
        .adjust("stack")
        .position("sold")
        .color("type", (type) => {
          if (type == "1000册以上") {
            return "#E2041B";
          } else if (type == "500~1000册") {
            return "#D9333F";
          } else if (type == "100~500册") {
            return "#E9546B";
          } else if (type == "10~100册") {
            return "#F09199";
          } else if (type == "10册以下") {
            return "#F5B1AA";
          }
        })
        .tooltip("type*sold", function (type, sold) {
          return {
            title: "销售层级",
            name: type,
            value: sold + "%",
          };
        })
        .shape("slice-shape");
      this.ringChart1.interaction("element-active");
      // this.ringChart1.removeInteraction("legend-filter");
      // this.ringChart1.removeInteraction("legend-active");
      this.ringChart1.render();
    },
    initData2() {
      let data = this.ringData2,
        _this = this;
      // 可以通过调整这个数值控制分割空白处的间距，0-1 之间的数值
      const sliceNumber = 0.003;
      // 自定义 other 的图形，增加两条线
      registerShape("interval", "slice-shape", {
        draw(cfg, container) {
          const points = cfg.points;
          let path = [];
          path.push(["M", points[0].x, points[0].y]);
          path.push(["L", points[1].x, points[1].y - sliceNumber]);
          path.push(["L", points[2].x, points[2].y - sliceNumber]);
          path.push(["L", points[3].x, points[3].y]);
          path.push("Z");
          path = this.parsePath(path);
          return container.addShape("path", {
            attrs: {
              fill: cfg.color,
              path,
            },
          });
        },
      });

      this.ringChart2 = new Chart({
        container: "ring-chart2", // 指定图表容器 ID
        autoFit: true,
        height: 160,
        padding: [0, 0, 0, -200],
      });

      this.ringChart2.data(data);
      this.ringChart2.scale("sold", {
        formatter: (val) => {
          // val = val * 100 + "%";
          return val;
        },
      });
      this.ringChart2.coordinate("theta", {
        radius: 0.75,
        innerRadius: 0.7,
      });
      this.ringChart2.legend("type", {
        position: "right", // 配置图例显示位置
        custom: true, // 关键字段，告诉 G2，要使用自定义的图例
        offsetX: -100,
        items: data.map((obj, index) => {
          return {
            name: obj.type, // 对应 itemName
            value: obj.sold, // 对应 itemValue
            marker: {
              symbol: "circle", // marker 的形状
              style: {
                r: 5, // marker 图形半径
                fill: ["#007B43", "#47885E", "#98D98E", "#BADCAD", "#D6E9CA"][
                  index
                ],
              },
            }, // marker 配置
          };
        }),
        itemName: {
          style: {
            fill: "#07193F",
          },
        },
        itemValue: {
          style: {
            fill: "#07193F",
            fontWeight: 900,
          }, // 配置 itemValue 样式
          formatter: (val, obj) => {
            if (obj.id == "预售中") {
              return `\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t${val}%`;
            } else if (obj.id == "1~2个月") {
              return `\t\t\t\t\t\t\t\t\t\t\t\t${val}%`;
            } else if (obj.id == "3~4个月") {
              return `\t\t\t\t\t\t\t\t\t\t\t\t${val}%`;
            } else if (obj.id == "4~6个月") {
              return `\t\t\t\t\t\t\t\t\t\t\t\t${val}%`;
            } else if (obj.id == "6个月以上") {
              return `\t\t\t\t\t\t\t\t\t${val}%`;
            }
          },
        },
      });
      this.ringChart2.tooltip({
        showMarkers: false,
      });
      this.ringChart2
        .interval()
        .adjust("stack")
        .position("sold")
        .color("type", (type) => {
          if (type == "预售中") {
            return "#007B43";
          } else if (type == "1~2个月") {
            return "#47885E";
          } else if (type == "3~4个月") {
            return "#98D98E";
          } else if (type == "4~6个月") {
            return "#BADCAD";
          } else if (type == "6个月以上") {
            return "#D6E9CA";
          }
        })
        .tooltip("type*sold", function (type, sold) {
          return {
            title: "上市时间",
            name: type,
            value: sold + "%",
          };
        })
        .shape("slice-shape");
      this.ringChart2.interaction("element-active");
      // this.ringChart2.removeInteraction("legend-filter");
      // this.ringChart2.removeInteraction("legend-active");
      this.ringChart2.render();
    },
    // 头部切换机构触发
    publisherChange() {
      this.page = 1;
      this.calendarPage = 1;
      this.chooseTime = "1";
      this.chooseTrend = 0;
      this.chooseId = 0;
      this.isLoading = true;
      this.calendarLoading = true;
      this.calendarGoodsLoading = true;
      this.yearList = this.$getYearList();
      this.chooseYear = this.yearList[0].value;
      this.chooseMonth = this.$moment().format("MM");
      if (Number(this.chooseMonth) < 10) {
        this.chooseMonth = this.chooseMonth.toString().replace(/0/, "");
      }
      this.getData();
      this.getCalendarData();
      this.getData();
    },
  },
};
</script>
